﻿<div id="start-page" class="static-content">

    <h3>Getting Started with AjaxStack</h3>
    
    <p>
        Like all new open-source projects the documentation is currently weak but the code is strong :)
    </p>
    
    <p>
        We recommend you start by downloading the 
        <a href="http://code.google.com/p/ajaxstack/source/browse/#svn/trunk/AjaxStack.Demo">Ajax Stack demo project</a>
        and use that as your starting point.        
    </p>

    <p>
        An AjaxStack project is just a standard Visual Studio.NET 'Web Application' project 
        that with the following HttpHandlers included: 
    </p>

    <table class="dll">
        <caption>AjaxStack.dll</caption>
        <thead>
            <tr>
                <th>Path</th>
                <th>Type</th>
                <th>Description</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">
                    <span class="deps"><em>requires: </em> <a href="http://www.ikvm.net/">IKVM</a></span>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>*/all</td>
                <td>AjaxStack.Handlers.AllFilesHandler</td>
                <td>
                    Appending the '/all' suffix to any website directory (e.g. css/ html/ etc.) 
                    will output a web page with all the content of the files in that directory.
                </td>
            </tr>
            <tr>
                <td>css/latest</td>
                <td>AjaxStack.Handlers.CssHandler</td>
                <td>
                    Displays the 'Compressed CSS' contents of all the *.css files in the 
                    <b class="dir">css/</b> folder using 
                    <a href="http://developer.yahoo.com/yui/compressor/">Yahoo! YUI Compressor</a>.
                </td>
            </tr>
            <tr>
                <td>html/latest</td>
                <td>AjaxStack.Handlers.HtmlHandler</td>
                <td>
                    Displays the contents of AppPages.js file which contains all the 
                    *.html files in the <b class="dir">html/</b> folder.
                </td>
            </tr>
            <tr>
                <td>js/latest</td>
                <td>AjaxStack.Handlers.JavascriptHandler</td>
                <td>
                    Will generate generate the <b class="js">js/AppPages.js</b> file 
                    that contains all the *.html files in the <b class="dir">html/</b> folder and display 
                    the contents of all *.js files in the <b class="dir">js/</b> folder.
                </td>
            </tr>
            <tr>
                <td>release/latest</td>
                <td>AjaxStack.Handlers.ReleaseHandler</td>
                <td>
                    Will generate a 'release' version of your application using all the files in the 
                    <b class="dir">css/</b>, <b class="dir">html/</b>, <b class="dir">js/</b> 
                    and <b class="dir">jsLib/</b> at the following location:<br />
                    <b class="js">release/{AppName}-{ApiVersion}.min.js</b>. <br /><br />
                    
                    The content of all *.js files in the <b class="dir">jsLibOnLoad/</b> folder 
                    will be stored at:<br />
                    <b class="js">release/{AppName}-{ApiVersion}.onload.min.js</b><br /> 
                    Which holds JavaScript libraries that are not needed immediately but will 
                    still be downloaded after your web page has finished loading.<br /><br />
                                        
                    Finally an uncompressed version of all *.js files in the 
                    <b class="dir">js/</b> folder will be stored at:
                    <b class="js">release/jsApi-vsdoc.js</b>. 
                    Which you can use to get Intelli-Sense in Visual Studio.NET.
                </td>
            </tr>
        </tbody>
    </table>
    
    <p>
        The HttpHandlers (and .NET) are only required while your developing your application. 
        You don't even need to call the handlers directly as every time you refresh the 
        <b class="htm">debug.htm</b> version of your application, the handlers are automatically 
        called which will generate the latest version of your application. After which you can 
        view the release <b class="htm">default.htm</b> version of your application which only 
        references the generated static files.
    </p>
    
    <p>
        Once you have configured your 'Web Application' to include the above HttpHandlers, you can 
        modify your <b class="config">Web.Config</b> &lt;appSettings /&gt; to customize the 
        generated output of your website:
    </p>
    
    <table class="config">
        <caption>Web.Config AppSettings</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Example</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AppName</td>
                <td>ajaxstack-demo</td>
                <td>The name that will be included in the application's generated *.js</td>
            </tr>
            <tr>
                <td>ApiVersion</td>
                <td>1.0</td>
                <td>
                    The version number that will be included in the application's generated *.js
                    <br /><br />
                    You can use increment this number to keep multiple versions of your website.
                </td>
            </tr>
            <tr>
                <td>ExcludeLinesWith</td>
                <td>log,assert</td>
                <td>
                    Lines of JavaScript containing any of the comma-delimited list of statements 
                    you wish to exclude in the 'release' version of your application.
                </td>
            </tr>
            <tr>
                <td>AppendAfterJavascriptNamespace</td>
                <td>if (window.onScriptLoad) window.onScriptLoad();</td>
                <td>
                    Append additional JavaScript like a callback function so you can start loading 
                    your application as soon as possible.
                </td>
            </tr>
        </tbody>
    </table>        

    <div class="page-links">
        <span class="nav-link next" href="#startProjectLayout">Project Layout</span>
    </div>    
    
</div>